/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="RandomMeasureDetail" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>随机测量详情
      </mu-appbar>
    </div>
    <div style="height:calc(100vh - .45rem);overflow: auto;background: #fff">
      <div class="lan-detail-list">
        <span class="lan-detail-h">责任单位</span>
        <span class="lan-detail-r">{{detail.deptName}}</span>
      </div>
      <!-- <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
            <span class="lan-detail-h">平面图标记</span>
            <span class="lan-detail-r">
              隐藏标号
              <mu-switch class="demo-picker-form" v-model="markSwitch"></mu-switch>
            </span>
          </div>
          <div class="img-box">
            <MapShow
              :width="'100%'"
              :url="detail.photoUrl"
              :points="detail.pointList"
              :showPoint="!markSwitch"
              :readonly="true"
            ></MapShow>
          </div>
        </div>
      </div>-->
      <div class="lan-detail-list">
        <div class="lan-detail-list-box" style="width: 100%;">
          <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
            <span class="lan-detail-h">
              隐藏标号
              <mu-switch class="demo-picker-form" v-model="markSwitch"></mu-switch>
            </span>
          </div>
          <div class="img-box">
            <MapShow
              v-if="detail.photoUrl"
              :width="'100%'"
              :url="detail.photoUrl"
              :points="handlePoints(detail.pointList)"
              :showPoint="!markSwitch"
              :readonly="true"
            ></MapShow>
          </div>
        </div>
      </div>
      <div class="flex_b">
        <div class="lan-detail-list" style="width:50%">
          <span class="lan-detail-h">实测点数</span>
          <span class="lan-detail-r" style="text-align:center;">{{detail.pointNum}}</span>
        </div>
        <div class="lan-detail-list" style="width:50%">
          <span class="lan-detail-h">实测次数</span>
          <span class="lan-detail-r" style="text-align:center;">{{detail.sumCount}}</span>
        </div>
      </div>
      <div class="flex_b">
        <div class="lan-detail-list" style="width:50%">
          <span class="lan-detail-h">合格次数</span>
          <span class="lan-detail-r" style="text-align:center;">{{detail.qualCount}}</span>
        </div>
        <div class="lan-detail-list" style="width:50%">
          <span class="lan-detail-h">合格率</span>
          <span class="lan-detail-r" style="text-align:center;">{{detail.prop || 0}}%</span>
        </div>
      </div>
      <div class="lan-detail-list" v-for="(item,index) in (detail.pointList || [])" :key="index">
        <div class="lan-detail-list-box" >
          <div class="ly_flex ly_flex_just_between ly_flex_ali_center">
            <span class="lan-detail-h">实测点位{{index+1}}</span>
            <span class="lan-detail-h" style="padding-right: 80px;">实测次数:{{handList(detail.messageList || [],item).length}}</span>
          </div>
          <div class="img-box">
            <table class="custom-table" style="border: 1px solid #E0E0E0">
              <tr>
                <th style="width: 1.07rem;">实测分项</th>
                <th style="width: .8rem;">实测内容</th>
                <th style="width: .8rem;">数值</th>
                <th style="width: .8rem;">结果</th>
              </tr>
              <tr v-for="(meas, sq) in handList(detail.messageList || [],item)" :key="sq">
                <td style="width: 1.07rem;">{{meas.subentryName}}</td>
                <td style="width: .8rem;">{{meas.content}}</td>
                <td style="width: .8rem;">{{meas.value}}</td>
                <td style="width: .8rem;">{{meas.result == '1' ? '合格' : '不合格'}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">参与人</p>
          <div class="flex">
            <div
              class="userBox"
              v-for="(user, index) in handurl(detail.joinUserName)"
              :key="'c'+index"
            >
              <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">{{user.substr(0,1)}}</div>
              <span>{{user}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">实测人</p>
          <div class="flex">
            <div
              class="userBox"
              v-for="(user, index) in handurl(detail.createdUserName)"
              :key="'s'+index"
            >
              <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">{{user.substr(0,1)}}</div>
              <span>{{user}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="lan-detail-list">
        <span class="lan-detail-h">实测时间</span>
        <span class="lan-detail-r">{{detail.createdTime}}</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">现场照片</p>
          <div class="ly_flex ly_flex_wrap_wrap thumbnail-box ly_flex_just_between">
            <!--<img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.images)" @click="preview(list,index)"  :key="index"/>-->
            <img
              class="thumbnail"
              :src="list"
              v-for="(list,index) in handurl(detail.measureUrl)"
              @click="filePreviewAction(list,index)"
              :key="index"
            />
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">抄送人</p>
          <div class="flex">
            <div class="userBox" v-for="(user, index) in detail.copyList" :key="'c'+index">
              <div
                class="ly_flex ly_flex_just_center ly_flex_ali_center add"
              >{{user.userName.substr(0,1)}}</div>
              <span>{{user.userName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 0 14px;">
        <mu-button full-width color="primary" style="margin:.2rem 0" @click="gotoOrder">生成整改通知单</mu-button>
      </div>
    </div>

    <ImgPreview :imgUrls="imgs" :open="imgPreview" @close="closeDialog"></ImgPreview>
    <FilePreview :fileUrl="fileUrl" :open="filePreview" @close="closeFileDialog"></FilePreview>
  </div>
</template>

<script>
import ImgPreview from "@/preview/ImgPreview.vue";
import FilePreview from "@/preview/FilePreview.vue";

export default {
  name: "RandomMeasureDetail",
  components: {
    ImgPreview,
    FilePreview
  },
  props: {},
  data() {
    return {
      api: {
        getRandomMeasureDetailApi: "/safety/measure/detail" // 获取详情
      },
      id: "",
      detail: {
        pointList: [],
        photoUrl: ""
      },
      markSwitch: false,
      mapMarkUrl: "",
      imgPreview: false,
      imgs: [],
      filePreview: false,
      fileUrl: "",
      list: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: 1
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: 1
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: 7
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: 8
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: 16
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: 0
        },
        {
          name: "Lollipop",
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: 2
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: 45
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: 22
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: 6
        }
      ]
    };
  },
  computed: {},
  created() {
    this.id = this.$route.query.id;
    this.getDetailData(this.id);
  },
  mounted() {},
  watch: {},
  methods: {
    // 获取随机测量详情
    getDetailData(id) {
      this.$openLoading();
      this.$A
        .Go("get", this.api.getRandomMeasureDetailApi, {
          id: id
        })
        .then(response => {
          this.$closeLoading();
          Util.processRes(response, () => {
            this.detail = response.body;
          });
          Util.processError(this, response);
        })
        .catch(err => {
          this.$closeLoading();
          console.log(err);
        });
    },
    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    handList(list,str){
      return list.filter(o=>o.point == str)
    },
    handlePoints(pointList) {
      if (pointList && pointList.length) {
        let array = [];
        pointList.forEach(item => {
          let point = item.split(",");
          array.push({ lng: point[0], lat: point[1],left: point[0], top: point[1] });
        });
        return array;
      } else {
        return [];
      }
    },
    loadFile(list) {
      let a = document.createElement("a");
      a.setAttribute("href", list.url);
      a.setAttribute("download", list.name);
      a.click();
    },
    preview(item, index) {
      this.imgs = [...this.handurl(this.detail.images)];
      this.imgPreview = true;
    },
    filePreviewAction(url) {
      this.fileUrl = url;
      this.filePreview = true;
    },
    // 关闭
    openFileDialog() {
      this.filePreview = true;
    },
    // 关闭
    closeFileDialog() {
      this.filePreview = false;
    },
    closeDialog() {
      this.imgPreview = false;
    },
    gotoOrder() {
      this.$router.push({
        name: "GenerateRectificationOrder",
        query: {
          measureId: this.detail.id
        }
      });
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
</style>
